<template>
  <div id="myhead-container">
    <div class="header">
      <el-row style="height: 100%" :gutter="24">
        <el-col :span="11" :offset="6" style="height: 100%">
          <div class="grid-content bg-purple btns" style="height: 100%">
            <router-link
              v-for="item in menusList"
              :key="item.name"
              :to="item.path"
              class="btn"
              >{{item.meta.title}}</router-link
            >
            <!-- <el-button @click="$emit('changePage',1)" class="btn">数据概况</el-button>
            <el-button @click="$emit('changePage',2)" class="btn">告警中心</el-button> -->
          </div>
        </el-col>
        <el-col :span="3" style="height: 100%">
          <div class="grid-content bg-purple logo"><img src="../../assets/img/logo.png"/></div>
        </el-col>
        <el-col :span="4" style="height: 100%">
          <div class="grid-content bg-purple others" style="height: 100%">
            <div class="weather">
              <div style="text-align: right">{{ weather.value }}°C</div>
              <span>{{ weather.msg }}</span>
            </div>
            <el-divider direction="vertical" />
            <div class="timer">
              <span>{{ timer.time }}</span
              ><br />
              <span> {{ timer.date }} </span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import API, { head } from '@/api'
export default {
  name: 'myhead',
  data () {
    return {
      logo: 'LOGO',
      weather: {
        value: 2,
        msg: '多云转晴'
      },
      timer: {
        time: '17:50',
        date: '2021-07-27'
      },
      menusList: []
    }
  },
  async mounted () {
    const { routes } = this.$router.options
    this.menusList = [...routes]
    // 获取时间信息
    const date = new Date()
    this.timer.time = `${date.getHours()}:${date.getMinutes()}`
    this.timer.date = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    // 获取天气数据
    const data = (await API(head.MAIN_INFO)).data
    this.weather.value = data.temperature // 温度
    this.weather.msg = data.info // 天气情况
  }
}
</script>

<style lang="scss" scoped>
#myhead-container {
  background: url("~@/assets/img/head_bj.png") no-repeat;
  background-size: contain;
  width: 100vw;
  height: 160px;
  position: absolute;
  left: 0;
  top: 0;
}
.header {
  height: 100%;
}
#myhead-container {
  .btns {
    display: flex;
  }
  .btn:hover,
  /deep/ .btn.router-link-exact-active {
    /* height: 128px; */
    box-shadow: inset 0 0 80px rgba($color: #fff, $alpha: 0.6);
    &::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0px;
      height: 4px;
      width: 100%;
      background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0)
      );
    }
  }
  .btn {
    color: #fff;
    background: transparent;
    border: transparent;
    width: 200px;
    height: 130px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    text-decoration: none;
    position: relative;
    box-shadow: 4px 0 87px inset rgba($color: #3196fa, $alpha: 0.5);
  }
}
#myhead-container .logo {
  color: rgb(156, 205, 255);
  // padding-top: 50px;
  // padding-left: 30px;
  img {
    width: 120px;
    height: 120px;
  }
}
#myhead-container .others {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
  color: rgb(158, 207, 255);
}
</style>
